
<!-- 商品分类层级最多为三层，level字段标识 -->
<template>
  <div class="component-container">
    <!-- <div>
    <el-table
      v-model:data="genreList"
      style="width: 100%">
      <el-table-column
      v-loading="loading"
        prop="name"
        label="name"
        @cell-click="handleClick()">
      </el-table-column>
    </el-table>
  </div> -->

    <div v-for="item in genreList" :key="item.id">
      <el-row>
        <div class="width:100px">
          <el-button
            type="text"
            class="custom-button"
            @click="handleClick(item)"
            >{{ item.name }} &nbsp;</el-button
          >
          <el-button type="text"> 修改</el-button>
          <el-button type="text"> 停用</el-button>
          <el-button type="text"> 删除</el-button>
        </div>
      </el-row>
    </div>

    <!-- <div v-for="o in genreList" :key="o.genreId" class="text item">
    
    
     <el-row >
       <span @click="handleClick(o)">{{ o.name }}</span>
                       <el-button type="text"> 修改</el-button>
                <el-button type="text"> 停用</el-button>
                <el-button type="text"> 删除</el-button>

     </el-row>
    </div> -->
    <!-- </div> -->
  </div>
</template>

<script setup name="Category">
import {
  loadOneProductGenreList,
  getGenre,
  delGenre,
  addGenre,
  updateGenre,
} from "@/api/order/genre.js";
const emit = defineEmits(["category-click"]);
const data = reactive({
  // 遮罩层
  loading: true,
  // 表格数据
  genreList: [],
  // 是否显示弹出层
  open: false,
  // 查询参数
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    genreId: null,
    companyId: null,
    name: null,
    parentId: null,
    STATUS: null,
    genrePath: null,
    LEVEL: null,
    FLOOR: null,
    NUM: null,
    MEMO: null,
    imagePath: null,
    createTime: null,
    createEmployeeId: null,
    updateTime: null,
    updateEmployeeId: null,
  },
  // 表单参数
  form: {},
  // 表单校验
  rules: {},
  dialog: {
    title: "",
    visible: false,
  },
});
const { loading, open, queryParams, form, rules, dialog, genreList } =
  toRefs(data);

function getList() {
  loading.value = true;
  loadOneProductGenreList(queryParams.value).then((response) => {
    genreList.value = response;
    loading.value = false;
  });
}

function handleClick(row) {
  console.log("click event");
  emit("category-click", row);
}
function handleAdd(row) {
  console.log("click add");
}

getList();
</script>
<style lang="scss">
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 240px;
  min-height: 800px;
  height: auto;
}

.item {
  width: calc(25% - 10px);
  margin-bottom: 10px;
  background-color: #f0f0f0;
  padding: 10px;
}

.category {
  &_node {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;

    &_img {
      width: 20px;
      height: 20px;
      margin-top: -5px;
      vertical-align: middle;
    }
  }
}

.custom-button {
  color: rgb(16, 2, 2); /* 设置按钮文字颜色为红色 */
  margin-bottom: 8px;
}
</style>
